html {
  font-size: 10px;
  height: 100%;
  overscroll-behavior: none;
}
body {
	margin: 0 auto;
	max-width: 980px;
	height: auto;
	overflow-y: auto;
	overscroll-behavior: none;
}

#scroll-to-top {
	position: fixed;
	width: 40px;
	height: 40px;
	right: 25px;
	bottom: 25px;
	background-color: var(--vscode-button-background, #444);
	border-color: var(--vscode-button-border);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 1px 1px 1px rgba(0,0,0,.25);
	outline: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

#scroll-to-top:hover {
	background-color: var(--vscode-button-hoverBackground);
	box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}

body.vscode-high-contrast #scroll-to-top {
	border-width: 2px;
	border-style: solid;
	box-shadow: none;
}

#scroll-to-top span.icon::before {
	content: "";
	display: block;
	background: var(--vscode-button-foreground);
	/* Chevron up icon */
	webkit-mask-image: url('');
	-webkit-mask-image: url('');
	width: 16px;
	height: 16px;
}

/* Header styling */
h2 {
  margin-top: 1.2em;
  scroll-margin-top: 1.2em;
}

h2:not(:first-of-type) {
  margin-top: 4em;
  scroll-margin-top: 1em;
}

h3 {
  margin-top: 4em;
  scroll-margin-top: 1em;
}

h2 + h3 {
  margin-top: 0;
}

/* Sparkle chat button styling */
#sparkle-chat {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--vscode-button-secondaryBackground, #3c3c3c);
  border: .25px solid var(--vscode-button-secondaryBorder, #6c6c6c);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  text-decoration: none;
  transition: background-color 0.2s;
}

#sparkle-chat:hover {
  background: var(--vscode-button-secondaryHoverBackground, #1177bb);
}

#sparkle-chat:focus {
  outline: none;
  border: .25px solid var(--vscode-button-secondaryBorder, #6c6c6c);
}

#sparkle-chat::before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M8.66535 15.7345C8.90969 15.9075 9.20192 15.9999 9.50129 15.9989V15.9949C9.78358 15.9955 10.0598 15.9132 10.2957 15.7582C10.5316 15.6031 10.7168 15.3822 10.8283 15.1229L11.4413 13.2589C11.5829 12.8366 11.8207 12.4531 12.1361 12.1386C12.4514 11.8241 12.8356 11.5873 13.2583 11.4469L15.0363 10.8689C15.3227 10.7683 15.5701 10.5799 15.7432 10.3305C15.9164 10.0812 16.0065 9.7836 16.0007 9.48009C15.9949 9.17659 15.8936 8.88262 15.7111 8.64003C15.5286 8.39744 15.2743 8.21858 14.9843 8.12889L13.2293 7.55889C12.8048 7.41763 12.419 7.1793 12.1027 6.86283C11.7864 6.54637 11.5483 6.1605 11.4073 5.73589L10.8293 3.95889C10.7285 3.67586 10.542 3.43127 10.2958 3.25908C10.0496 3.0869 9.7559 2.99567 9.45547 2.99809C9.15504 3.00051 8.86282 3.09645 8.61942 3.27258C8.37602 3.44871 8.19353 3.69628 8.09729 3.98089L7.51429 5.77289C7.37371 6.18515 7.14135 6.56012 6.83474 6.8695C6.52813 7.17888 6.15528 7.4146 5.74429 7.55889L3.96729 8.12989C3.75592 8.20382 3.56463 8.32589 3.40855 8.48647C3.25247 8.64704 3.13587 8.84172 3.06798 9.05511C3.00008 9.2685 2.98274 9.49475 3.01733 9.716C3.05193 9.93724 3.1375 10.1474 3.26729 10.3299C3.44418 10.5789 3.69508 10.7657 3.98429 10.8639L5.73829 11.4329C6.16392 11.5753 6.55049 11.815 6.86729 12.1329C6.95236 12.2173 7.03186 12.3072 7.10529 12.4019C7.30447 12.6597 7.45833 12.9495 7.56029 13.2589L8.13829 15.0339C8.23676 15.3166 8.42102 15.5615 8.66535 15.7345ZM16.332 20.7819C16.1415 20.6461 15.9981 20.4541 15.922 20.2329L15.594 19.2259C15.5302 19.0344 15.4231 18.8602 15.281 18.7169C15.1385 18.574 14.9645 18.4664 14.773 18.4029L13.782 18.0799C13.5516 18.0026 13.3516 17.8541 13.211 17.6559C13.0737 17.4636 13.0002 17.2331 13.001 16.9969C13.0013 16.7591 13.0757 16.5274 13.214 16.3339C13.3512 16.1394 13.5466 15.9934 13.772 15.9169L14.778 15.5909C14.965 15.5245 15.1343 15.4162 15.273 15.2742C15.4117 15.1322 15.516 14.9604 15.578 14.7719L15.902 13.7799C15.9782 13.5557 16.1222 13.3606 16.3141 13.2218C16.5059 13.0829 16.7362 13.0071 16.973 13.0048C17.2099 13.0025 17.4416 13.0738 17.6361 13.2089C17.8306 13.344 17.9784 13.5362 18.059 13.7589L18.388 14.7729C18.4524 14.963 18.5599 15.1356 18.7022 15.2771C18.8445 15.4187 19.0176 15.5254 19.208 15.5889L20.2 15.9119C20.4287 15.9834 20.629 16.1251 20.7727 16.3169C20.9163 16.5086 20.9959 16.7408 21.0002 16.9803C21.0045 17.2199 20.9333 17.4547 20.7967 17.6516C20.6601 17.8484 20.4649 17.9972 20.239 18.0769L19.225 18.4059C19.0349 18.4707 18.8622 18.5781 18.72 18.7199C18.5777 18.8627 18.4705 19.0366 18.407 19.2279L18.085 20.2169C18.0075 20.4472 17.8586 20.6469 17.66 20.7869C17.468 20.9249 17.2375 20.9991 17.001 20.9989C16.7607 20.9989 16.5265 20.9229 16.332 20.7819Z' fill='%23cccccc' /%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

/* Highlights table styling */
.highlights-table {
  border-collapse: collapse;
  border: none;
}

.highlights-table th {
  vertical-align: top;
  border: none;
  padding-top: 2em;
  font-weight: bold;
}

.highlights-table td {
  vertical-align: top;
  border: none;
}

.highlights-table tr:nth-child(2) td {
  padding-bottom: 1em;
}

/* Main content layout */
.toc-nav-layout {
  display: flex;
  align-items: flex-start;
}

/* TOC Navigation */
#toc-nav {
  position: sticky;
  top: 20px;
  width: 10vw;
  min-width: 120px;
  margin-right: 32px;
  margin-top: 2em;
}

#toc-nav > div {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 1em;
  text-transform: uppercase;
}

#toc-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#toc-nav ul li {
  margin-bottom: 0.5em;
}

#toc-nav a {
  color: var(--vscode-editor-foreground, #ccc);
  text-decoration: none !important;
  transition: background-color 0.2s, color 0.2s;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 4px;
  display: block;
  outline: none;
}

#toc-nav a:hover {
  background-color: var(--vscode-button-secondaryHoverBackground, #1177bb);
  color: var(--vscode-button-secondaryForeground, #ffffff);
  cursor: pointer;
  text-decoration: none !important;
}

/* Main content area */
.notes-main {
  flex: 1;
  min-width: 0;
}

/* Responsive breakpoint - Hide TOC on smaller screens */
@media (max-width: 576px) {
  #toc-nav {
    display: none;
  }

  .toc-nav-layout {
    flex-direction: column;
  }

  .notes-main {
    margin-left: 0;
  }
}
